<template>
  <div id="app">
    <HelloWorld :back='back'>
      <template #form>
        <form  @submit.prevent="sub" action="#">
          <label for="name">用户名：</label>
          <input v-model="add.username" type="text" name="" id="name">
          <br>
          <label for="pass">密码：</label>
          <input v-model="add.password" type="password" name="" id="pass">
          <br>
          <label for="">
            兴趣：
            <select v-model="add.fun" style="width:100px;height:20px" name="" id="">
              <option value="篮球">篮球</option>
              <option value="足球">足球</option>
              <option value="排球">排球</option>
            </select>
          </label>
          <br>
          性别：
          <label for="nan">男:</label>
          <input v-model="add.sex" type="radio" name="ra" id="nan" value="1">
          <label for="nv">女:</label>
          <input v-model="add.sex" type="radio" name="ra" id="nv" value="2">
          <br>
          <input style="width: 100px;margin-top:50px;height: 50px;" type="submit" value="注册">
        </form>
      </template>
      <template #table>
        <table border="1">
          <tr>
            <th>用户名</th>
            <th>性别</th>
            <th>兴趣</th>
          </tr>
          <tr v-for="(v,i) of data.state.data" :key="i">
            <td>{{v.username}}</td>
            <td v-if="v.sex==1">男</td>
            <td v-if="v.sex==2">女</td>
            <td>{{v.fun}}</td>
          </tr>
        </table>
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import data from './data.js';
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data(){
    return{
      back:{red:'background-color:red',yellow:'background-color:yellow'},
      data:data,
      add:{
        username:'',
        password:'',
        fun:'篮球',
        sex:'1'
      },
    }
  },
  methods:{
    sub(){
      data.state.data.push(this.add);
      this.back={red:'background-color:blue',yellow:'background-color:yellow'}
      this.add={
        username:'',
        password:'',
        fun:'篮球',
        sex:'1'
      }
    }
  }
};
</script>

<style>
#pass,#name{
  width: 300px;
  height: 30px;
  margin-top: 20px;
}
#nan,#nv{
  width: 100px;
  height: 20px;
  margin-top: 20px;
}

</style>
